<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间管理</title>
    <link rel="icon" href="/img/avatar.jpg">
</head>
<body>
<style>
    #data{
        height: 600px;
        width: 170px;
    }
    .button {
        background-color: #008CBA;
        border: none;
        color: white;
        padding: 5px 11px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5px;
    }
</style>
<textarea id="data">
第5组 易效能100天践行20180127 （24/100 ）
全员完成时间
42.谢惠丹  6:22
43.三    两 6:48
44.杨玉杰 6:47
45.李    雯 7:01
48.苗婷婷 5:58
49.苗强强 6:30
50.邹凤霞 6:47
76.穆    婧9:30

第5组 易效能100天践行20180126（23/100 ）
全员完成时间
42.谢惠丹  6:47
43.三    两 6:35
44.杨玉杰 6:08
45.李    雯 6:42
48.苗婷婷 5:34
49.苗强强 6:35
50.邹凤霞 6:58
76.穆    婧6:58

第5组 易效能100天践行20180125（22/100 ）
全员完成时间
42.谢惠丹  6:46
43.三    两 6:30
44.杨玉杰 6:13
45.李    雯 7:03
48.苗婷婷 5:49
49.苗强强7:14
50.邹凤霞
76.穆    婧7:05

第5组 易效能100天践行20180124（21/100 ）
全员完成时间
42.谢惠丹  6:35
43.三    两  6:37
44.杨玉杰 6:11
45.李    雯 6:40
48.苗婷婷 6:05
49.苗强强6:31
50.邹凤霞 6:40
76.穆    婧6:49

第5组 易效能100天践行20180123（20/100 ）
全员完成时间
42.谢惠丹  6:13
43.三    两 6:35
44.杨玉杰 6:02
45.李    雯 6:46
48.苗婷婷 6:03
49.苗强强5:37
50.邹凤霞 6:38
76.穆    婧5:51
第5组 易效能100天践行20180122（19/100 ）
全员完成时间
42.谢惠丹  6:46
43.三    两 6:35
44.杨玉杰 6:14
45.李    雯 6:32
48.苗婷婷 5:46
49.苗强强6:25
50.邹凤霞 6:37
76.穆    婧5:54

第5组 易效能100天践行20180121（18/100 ）
全员完成时间
42.谢惠丹  7:00
43.三    两 7:05
44.杨玉杰 6:11
45.李    雯 6:33
48.苗婷婷 5:41
49.苗强强 6:41
50.邹凤霞 7:02
76.穆    婧7:38

第5组 易效能100天践行20180120（17/100 ）
全员完成时间
42.谢惠丹  6:01
43.三    两 6:02
44.杨玉杰 6:30
45.李    雯 7:02
48.苗婷婷 5:30
49.苗强强 5:00
50.邹凤霞 6:45
76.穆    婧5:58

第5组 易效能100天践行20180119（16/100 ）
全员完成时间
42.谢惠丹  6:31
43.三    两 6:31
44.杨玉杰 6:20
45.李    雯 6：40
48.苗婷婷 6:14
49.苗强强 5:11
50.邹凤霞 6:23
76.穆    婧5:59

第5组 易效能100天践行20180118（15/100 ）
全员完成时间
42.谢惠丹  6:21
43.三    两 6:27
44.杨玉杰 6:05
45.李    雯 8:05
48.苗婷婷 5:39
49.苗强强 6:40
50.邹凤霞 5:46
76.穆    婧5:56

第5组 易效能100天践行20180117（14/100 ）
全员完成时间
42.谢惠丹  6:20
43.三    两 6:21
44.杨玉杰 7:10
45.李    雯 7:05
48.苗婷婷 5:50
49.苗强强 6:40
50.邹凤霞 6:44
76.穆    婧5:55

第5组 易效能100天践行20180116（13/100 ）
全员完成时间
42.谢惠丹  6:21
43.三    两 6:22
44.杨玉杰 5:32
45.李    雯 6:51
48.苗婷婷  6:30
49.苗强强 6:40
50.邹凤霞 6:33
76.穆    婧5:44

第5组 易效能100天践行20180115（12/100 ）
全员完成时间
42.谢惠丹  5:30
43.三    两 6:28
44.杨玉杰 6:17
45.李    雯 6:46
48.苗婷婷 6:07
49.苗强强 5:54
50.邹凤霞 6:38
76.穆    婧 6:10
加分项+3

第5组 易效能100天践行20180114（11/100 ）
全员完成时间
42.谢惠丹  7:02
43.三    两 7:20
44.杨玉杰 6:07
45.李    雯 7:38
48.苗婷婷 7:34
49.苗强强 6:40
50.邹凤霞 6:37
76.穆    婧 7:12
一人未按时打卡

第5组 易效能100天践行20180113（10/100 ）
全员完成时间
42.谢惠丹  6:45
43.三    两 6:05
44.杨玉杰 7:30
45.李    雯 7:08
48.苗婷婷 5:56
49.苗强强 5:21
50.邹凤霞 6:05
76.穆    婧5:35
加分项 +2

第5组 易效能100天践行20180112（9/100 ）
全员完成时间
42.谢惠丹6:46
43.三    两6:25
44.杨玉杰6:18
45.李    雯6:47
48.苗婷婷5:42
49.苗强强6:20
50.邹凤霞7:03
76.穆    婧5:55
加分项+1

第5组 易效能100天践行20180111（8/100 ）
全员完成时间
42.谢惠丹7:00
43.三    两6:52
44.杨玉杰6:02
45.李    雯7:20
48.苗婷婷5:52
49.苗强强6:20
50.邹凤霞6:55
76.穆    婧6:09
加分项+2

第5组 易效能100天践行20180110（7/100 ）
全员完成时间
42.谢惠丹6:47
43.三    两6:49
44.杨玉杰7:15
45.李    雯6,51
48.苗婷婷5:51
49.苗强强5:59
50.邹凤霞6:56
76.穆    婧5:04
加分项 +2

第5组 易效能100天践行20180109（6/100 ）
全员完成时间
42.谢惠丹7:00
43.三    两 6:30
44.杨玉杰 6:02
45.李    雯6:55
48.苗婷婷 5:46
49.苗强强6:18
50.邹凤霞7.00
76.穆    婧5:59
加分项 +2


第5组 易效能100天践行20180108（5/100 ）
全员完成时间
42.谢惠丹7:02
43.三    两 5:54
44.杨玉杰 6:01
45.李    雯6:19
48.苗婷婷5:24
49.苗强强6:20
50.邹凤霞6:55
76.穆    婧5:40
加分项 +22
</textarea>
<button id="" class="button" onclick="resolve()">解析</button>
<div id="week" style="width: 70%;height:600px; display: inline-block;"></div>
<hr>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%;height:600px;"></div>
<script src="js/jquery.min.js" ></script>
<script src="js/echarts.common.min.js" ></script>
<script>
    resolve();
    function resolve() {
        var userData = {};
        var datex = [];
        var dayDatas = $('#data').val().split('易效能100天践行');
        var yearDate = "";
        for (var i=1;i<dayDatas.length;i++) {
            var dayData = dayDatas[i];
            yearDate = dayData.substr(0,dayData.indexOf("（"))
            datex.push(yearDate);
            var dataLineReg =/^\d+/;
            var dateReg = /\d+[:|：|,|.]\d+/;
            $.each(dayData.split("全员完成时间")[1].split("\n"), function () {
                if (dataLineReg.test(this)) {
                    var name = this.replace(dateReg,"").replace(/\s+/g, "");
                    var user = typeof userData[name] == 'undefined' ? {} : userData[name];
                    if (typeof user.data == 'undefined') {
                        user.data = [];
                    }
                    var date = this.match(dateReg)?this.match(dateReg)[0].replace(/[^\d]/, ':').split(":"):["10","00"];
                    user.data.push({date: yearDate,value: parseInt(date[0]*60)+parseInt(date[1])});
                    userData[name] = user;
                }
            })
        }
        var keys = [];
        var values = [];
        $.each(userData, function (key, value) {
            keys.push(key);
            value.name=key;
            value.type='line'
            var data = value.data.sort(function (a, b) { return a.date - b.date })
            value.data = [];
            data.forEach(function (item) {
               value.data.push(item.value);
            })

            values.push(value)
        });
        var datex2 = [];
        $.each(datex.sort(function (a, b) { return a-b; }), function (item, that) {
            datex2.push(that.substring(4,6)+'月'+that.substring(6)+'日');
        })
        init(keys, values, datex2, yearDate.substring(0,4)+'易效能'+dayDatas[0].substring(1).trim()+'打卡情况');
        initWeek(keys, values, datex2, yearDate.substring(0,4)+'易效能'+dayDatas[0].substring(1).trim()+'打卡情况');

    }
    function initWeek(keys, values, datex, title) {
        var weekValues = [];
        for(var i=0;i<values.length;i++) {
            if (values[i].data) {
                values[i].data = values[i].data.slice(values[i].data.length-7, values[i].data.length);
            }
            weekValues.push(values[i])
        }

        init(keys, weekValues, datex.slice(datex.length-7,datex.length), title+"-最近一周","week")
    }

    function init(keys, values, datex, title, dom) {
        values.push({
            name: '平行于y轴的趋势线',
            type: 'line',

            markLine: {
                name: '8:00',
                itemStyle:{
                    normal:{lineStyle:{color:'red'},label:{show:true,position:'end', formatter: '8:00'}}
                },
                data: [
                    [{
                        coord: [datex[0], 480]
                    }, {
                        coord: [datex[datex.length - 1], 480]
                    }
                    ],
                ]
            }
        },{
            name: '7:30',
            type: 'line',

            markLine: {
                name: '7:30',
                itemStyle:{
                    normal:{lineStyle:{color:'purple'},label:{show:true,position:'end', formatter: '7:30'}}
                },
                data: [
                    [{
                        coord: [datex[0], 450]
                    }, {
                        coord: [datex[datex.length - 1], 450]
                    }
                    ],
                ]
            }
        },{
            name: '7:00',
            type: 'line',

            markLine: {
                name: '7:00',
                itemStyle:{
                    normal:{lineStyle:{color:'green'},label:{show:true,position:'end', formatter: '7:00'}}
                },
                data: [
                    [{
                        coord: [datex[0], 420]
                    }, {
                        coord: [datex[datex.length - 1], 420]
                    }
                    ],
                ]
            }
        }, {
                name: '10:00',
                type: 'line',

                markLine: {
                    name: '10:00',
                    itemStyle:{
                        normal:{lineStyle:{color:'red'},label:{show:true,position:'end', formatter: '未打卡或\n已超过10点'}}
                    },
                    data: [
                        [{
                            coord: [datex[0], 600]
                        }, {
                            coord: [datex[datex.length - 1], 600]
                        }
                        ],
                    ]
                }
            })


        // 基于准备好的dom，初始化echarts实例
        var myChart
        if (dom) {
            $('#'+dom).attr('_echarts_instance_','')
            myChart = echarts.init(document.getElementById(dom));
        } else {
            $('#main').attr('_echarts_instance_','')
            myChart = echarts.init(document.getElementById('main'));
        }


        // 指定图表的配置项和数据
        var option = {
            title: {
                text: title,
                x:'center',
                y: 'bottom'
            },
            radius : '100%',
            tooltip : {
                trigger: 'axis',
                formatter:function (params) {
                    var result = "";
                    params.sort(function (a, b) { return b.data-a.data }).forEach(function (item) {
                        var value = item.value;
                        var h = parseInt(value / 60);
                        var m = parseInt(value % 60);
                        if (h < 0 || h > 24)
                            return "";
                        if (m < 10){
                            m = '0' + m;
                        }
                        value = h + ':' + m;
                        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                        result += item.seriesName+":"+value+"<br/>";
                    })
                    return result;
                }
            },
            legend: {
                data:keys,
            },
            toolbox: {
                feature: {
                    saveAsImage: {title: '保存'}
                }
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : datex
                }
            ],
            yAxis : [
                {
                    type : '',
                    min: function(value) {
                        return value.min - 20;
                    },
                    axisLabel : {
                        formatter: function (value) {
                            var h = parseInt(value / 60);
                            var m = parseInt(value % 60);
                            if (h < 0 || h > 24)
                                return "";
                            if (m < 10){
                                m = '0' + m;
                            }
                            return h + ':' + m;
                        }
                    }
                }
            ],
            series : values
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    $(function () {
        // var keys =["one","two"];
        // var values = [
        //     {
        //         name:'one',
        //         type:'line',
        //         data:["80", "20", "10", "100", "90", "20", "20"]
        //     },
        //     {
        //         name: 'two',
        //         type: 'line',
        //         data:['30','40','130','70','110','20','40']
        //     }
        // ];
        // var datex = ['周一','周二','周三','周四','周五','周六','周日'];


        var keys = ["41.Melissa", "42.谢惠丹"];
        var values = [
            {data: [302, 310, 303, 316, 322], name: "41.Melissa", type: "line",
                markLine: {
                    data: [
                        {type: 'average', yAxis: 420, value: 7}
                    ]
                }},
            {data: [406, 420, 407, 420, 422], name: "42.谢惠丹", type: "line",
                markLine: {
                    data: [
                        {name: '3分线' ,yAxis: 420, value: 7}
                    ]
                }}
        ]
        var datex = ["20180108", "20180109", "20180110", "20180111", "20180112"];

        // init(keys, values, datex);

    })



</script>
</body>
</html>